<template>
  <div>
    <el-dialog
      title="绑定手机号"
      :visible.sync="dialogData.dialogVisible"
      width="800px"
      v-loading="listLoading"
      :show-close="showClose"
      @close="closeDialog"
      :close-on-click-modal="false"
    >
      <el-form
        ref="form1"
        :model="submitDialogData"
        :rules="dialogRules"
        label-width="150px"
      >
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input
            v-model="submitDialogData.phoneNumber"
            style="width: 400px"
            :maxlength="11"
            placeholder="请输入手机号"
          />
        </el-form-item>
        <el-form-item label="短信验证码" prop="verifyCode">
          <el-input
            placeholder="请输入短信验证码"
            style="width: 400px"
            :maxlength="11"
            v-model="submitDialogData.verifyCode"
          ></el-input>
          <el-button
            @click="getCode('submitDialogData')"
            type="primary"
            :disabled="codeDisabled"
            >{{ codeText }}</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="listLoading"
            type="primary"
            @click="submitModify('form1')"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { shopInfo } from "@/api/setting";
import { phone } from "@/utils/";
export default {
  components: {},
  props: {
    showDialog: {//弹层开关
      type: Boolean,
      default: false,
    },
    dialogData: {  //弹层开关
      type: Object,
      default: function() {
        return {
          dialogVisible: false,
          value: '',
          id: ''
        }
      }
    },
    showClose: {//X 按钮
      type: Boolean,
      default: true,
    },
  },
  watch: {
    'dialogData.dialogVisible'(val) {
      if (!val) {
        // 关闭窗口时清空数据
        this.submitDialogData = {};
        this.setinter && this.resetCodeFunc();//清除定时器
      }
    },
  },
  data() {
    let checkPhone = (rule, value, callback) => {
      let reg = /^1[3456789]\d{9}$/;
      if (!reg.test(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    return {
      listLoading: false,
    //   active: 0,
      codeDisabled: false,
      codeText: "获取验证码",
      setinter: null,//定时器
      dialogRules: {
        phoneNumber: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            validator: checkPhone,
            trigger: "blur",
          },
        ],
        verifyCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },
      // 第二步短信验证
      submitDialogData: {},
    };
  },
  mounted() {},
  beforeDestroy() {
    clearInterval(this.setinter);
  },
  methods: {
    closeDialog(){
      clearInterval(this.setinter)
      this.dialogData.dialogVisible = false
      this.$emit('handleCloseDialog')
    },
    // 重置短信验证码相关
    resetCodeFunc() {
      this.codeDisabled = false;//按钮可点
      this.codeText = "获取验证码";
      clearInterval(this.setinter);//清除定时器
    },
    submitModify(formName) {
      const { adminId } = this.$store.getters.info
      let data = {
        phone: this.submitDialogData.phoneNumber,
        verificationCode: this.submitDialogData.verifyCode,
        userId: adminId,
      }
      this.requestFuc
        .onSubmit({
          _that: this,
          formName,
          data: data,
          addFuc: shopInfo.reBindMobile,
        })
        .then(() => {
          this.$emit('handleBindingPhone')
          this.$store.dispatch('account/SET_STATUS')
          this.listLoading = false;
          this.dialogData.dialogVisible = false;
        })
        .catch((error) => {
          this.listLoading = false;
        });
    },
    // 获取验证码
    getCode(dialogFormName) {
      if (!phone(this[dialogFormName].phoneNumber)) {
        this.$message.warning("请输入正确的手机号");
        return;
      }
      const { adminId } = this.$store.getters.info
      let params = {
        phoneNumber: this[dialogFormName].phoneNumber,
        phone:
        this[dialogFormName].phoneNumber,
        userId: adminId,
        verificationCodeType: 9
      };
      this.listLoading = true
      shopInfo.getMobileCode(params).then(res => {
        if (res.code == '0') {
          this.$message.success(res.message)
          this.timeOut()
        }
        this.listLoading = false
      }).catch(error => {
        this.listLoading = false
      })
    },
    // 验证码倒计时
    timeOut() {
      let temp = 60;
      this.codeDisabled = true;
      this.setinter = setInterval(() => {
        this.codeText = temp + "秒";
        temp--;
        if (temp < 1) {
          this.codeText = "获取验证码";
          this.codeDisabled = false;
          clearInterval(this.setinter);
        }
      }, 1 * 1000);
    },
  },
};
</script>

<style scoped lang="scss">
</style>
